<template>
  <div id="swipercom">
    <div class="swiper-container" id="swiperIndex">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item, i) in imgs" :key="i">
          <img :src="'http://120.48.109.174:8081'+item.imgSrc" alt="" />
        </div>
      </div>
      //换页器
      <div class="swiper-pagination"></div>
    </div>
  </div>
</template>
 
<script>
import axios from "axios"
import "swiper/css/swiper.css"; //引入swiper样式
import Swiper from "swiper"; //引入swiper
export default {
  name: "Swiper",
  data() {
    return {
      imgs: [
        { pic: require("../assets/logo.png") },
        { pic: require("../assets/logo.png") },
        { pic: require("../assets/logo.png") },
      ],
    };
  },
  mounted() {
    var mySwiper = new Swiper("#swiperIndex", {
      //配置分页器内容
      direction: "vertical",
      mousewheel: true,
      loop: true, // 循环模式选项
      pagination: {
        el: ".swiper-pagination", //换页器与哪个标签关联
        clickable: true, //分页器是否可以点击
      },
    });
    axios.get("http://120.48.109.174:8081/home/swiper").then(res=>{
        console.log(res.data.body);
        this.imgs = res.data.body
    })
  },
};
</script>
 
<style >
.swiper-container {
  width: 80%;
  height: 400px;
  border-radius: 0.1rem;
  background-color: yellowgreen;
}
.swiper-slide img {
  width: 100%;
}
.swiper-pagination-bullet {
  background-color: white;
}
.swiper-pagination-bullet-active {
  background-color: orangered;
}
</style>